<template>
    <a-layout>
        <a-layout-header class="header">
            <div class="logo">
            </div>
            <a-menu class="menu" v-model:selectedKeys="selectedKeys1" theme="dark" mode="horizontal"
                :style="{ lineHeight: '64px' }">
                <a-menu-item key="1">首页</a-menu-item>
                <a-menu-item key="2">设置</a-menu-item>
                <a-menu-item key="3">个人</a-menu-item>
            </a-menu>
        </a-layout-header>
        <a-layout>
            <a-layout-sider width="300" style="background: #fff">
                <a-menu class="menu" v-model:selectedKeys="selectedKeys2" v-model:openKeys="openKeys" mode="inline"
                    :style="{ height: '100%', borderRight: 0 }">
                    <a-sub-menu class="menu" key="sub1">
                        <template #title>
                            <span>
                                <user-outlined />
                                报名管理
                            </span>
                        </template>

                        <a-menu-item key="1" @click="changeMenu('test')">
                            报名管理
                        </a-menu-item>
                        <a-menu-item key="2" @click="changeMenu('test')">
                            打印报名
                        </a-menu-item>

                    </a-sub-menu>
                    <a-sub-menu class="menu" key="sub2">
                        <template #title>
                            <span>
                                <laptop-outlined />
                                排考管理
                            </span>
                        </template>

                        <a-menu-item key="5" @click="changeMenu('test')">
                            排考管理
                        </a-menu-item>
                        <a-menu-item key="6" @click="changeMenu('test')">
                            打印排考
                        </a-menu-item>

                    </a-sub-menu>
                    <a-sub-menu key="sub3">
                        <template #title>
                            <span>
                                <notification-outlined />
                                自动排考
                            </span>
                        </template>

                        <!--二级菜单 路由嵌套跳转-->
                        <a-menu-item key="9" @click="changeMenu('allAllocation')">
                            自动排考
                        </a-menu-item>
                        <a-menu-item key="10" @click="changeMenu('problemAllocation')">
                            分配有问题的考场
                        </a-menu-item>
                        <a-menu-item key="11" @click="changeMenu('noneAllocation')">
                            未分配考场
                        </a-menu-item>

                    </a-sub-menu>
                    <a-sub-menu key="sub4">
                        <template #title>
                            <span>
                                <notification-outlined />
                                测试
                            </span>
                        </template>
                    </a-sub-menu>
                </a-menu>
            </a-layout-sider>
            <a-layout style="padding: 0 24px 24px">
                <!-- <a-breadcrumb style="margin: 16px 0">
                    <a-breadcrumb-item>Home</a-breadcrumb-item>
                    <a-breadcrumb-item>List</a-breadcrumb-item>
                    <a-breadcrumb-item>App</a-breadcrumb-item>
                </a-breadcrumb> -->
                <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '600px' }">
                    <!-- <router-view></router-view> 是 Vue.js 中用于渲染当前路由匹配到的组件的特殊组件
                        使用 Vue Router 时，<router-view> 会根据当前的 URL 匹配到相应的路由，并渲染出对应的组件 -->
                    <router-view></router-view>
                </a-layout-content>
            </a-layout>
        </a-layout>
    </a-layout>
</template>

<script setup>
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';


const selectedKeys1 = ref(['1']);
const selectedKeys2 = ref(['1']);
const collapsed = ref(false);
const openKeys = ref(['sub1']);

const data = [
    {
        key: '1',//分配记录ID
        exam: 'CET4',//考试ID
        class: '考场1',//考场ID
        teacher1: '教师1',//监考1报名ID
        teacher2: '教师2',//监考1报名ID
        tag: '正确分配',//是否正确分配
    },
    {
        key: '2',
        exam: 'CET4',
        class: '考场2',
        teacher1: '教师3',
        teacher2: '教师4',
        tag: '正确分配',
    },
    {
        key: '3',
        exam: 'CET6',
        class: '考场3',
        teacher1: '教师5',
        teacher2: '教师6',
        tag: '分配但有问题',
    },
    {
        key: '4',
        exam: '未分配',
        class: '考场4',
        teacher1: '未分配',
        teacher2: '未分配',
        tag: '未分配',
    },
];

const $router = useRouter();

const changeMenu = (route) => {
    console.log(route);
    console.log($router.currentRoute);
    // 获取路由对象并切换
    $router.push(route);
};

</script>

<style>
#components-layout-demo-top-side-2 .logo {
    float: left;
    width: 120px;
    height: 31px;
    margin: 16px 24px 16px 0;
    background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
    float: right;
    margin: 16px 0 16px 24px;
}

.site-layout-background {
    background: #fff;
}

.menu {
    font-size: 24px;
}
</style>

<!-- <style scoped>
.card-container {
    display: flex;
    flex-wrap: wrap;
}

.card-container a-card {
    margin-bottom: 100px;
}
</style>   -->

<!-- <script>
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';

export default defineComponent({
    components: {
        UserOutlined,
        LaptopOutlined,
        NotificationOutlined,
    },
    setup() {
        return {
            selectedKeys1: ref(['1']),
            selectedKeys2: ref(['1']),
            collapsed: ref(false),
            openKeys: ref(['sub1']),
        };
    },
    data() {
        return {
            data: [
                {
                    key: '1',//分配记录ID
                    exam: 'CET4',//考试ID
                    class: '考场1',//考场ID
                    teacher1: '教师1',//监考1报名ID
                    teacher2: '教师2',//监考1报名ID
                    tag: '正确分配',//是否正确分配
                },
                {
                    key: '2',
                    exam: 'CET4',
                    class: '考场2',
                    teacher1: '教师3',
                    teacher2: '教师4',
                    tag: '正确分配',
                },
                {
                    key: '3',
                    exam: 'CET6',
                    class: '考场3',
                    teacher1: '教师5',
                    teacher2: '教师6',
                    tag: '分配但有问题',
                },
                {
                    key: '4',
                    exam: '未分配',
                    class: '考场4',
                    teacher1: '未分配',
                    teacher2: '未分配',
                    tag: '未分配',
                },
            ],
            // selectedKeys1: ref(['1']),
            // selectedKeys2: ref(['1']),
            // openKeys: ref(['sub1']),
        };
    },
    methods: {
        //路由内容切换
        changeMenu(route) {
            console.log(route)
            //获取路由对象并切换
            this.$router.push(route)
        },
    }
});
</script> -->
